<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 520px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
</style>
<template>
    <div class="layout">
        <div class="layout-content">
            <Row>
                <Col span="3">
                     <Tree :data="classifyies" @on-select-change="onSelectionChangeTree"
 ></Tree>
                </Col>
                <Col span="21">
                    <div class="layout-content-main">
                       <Button type="primary" @click=" onOpen">添加</Button> 
                        <Button type="error" @click="onDeletes">删除多条记录</Button>
    <Input v-model="filter.name" @keyup.enter="onSearch">
            <Button slot="append" icon="ios-search" @click="onSearch"></Button>           
        </Input>
    <Table border :columns="columns" :data="filter.list" @on-selection-change="onSelectionChange"></Table>
   <Page :total="filter.total" size="small"  
        show-total show-elevator show-sizer
        @on-change="onChange"
        @on-page-size-change="onPageSizeChange"></Page>
     <Modal
            v-model="modal"
            title="数据操作"
            width='1200'
        >
            <Form ref="formValidate" :model="formValidate"  :label-width="80">                
                <FormItem label="商品名" prop="name">
                    <Input v-model="formValidate.name" placeholder="商品名" style="width: 300px"></Input>
                </FormItem>
                 <FormItem label="卖家" prop="seller">
                    <Input v-model="formValidate.seller" placeholder="卖家" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="价格" prop="price">
                    <Input v-model="formValidate.price" placeholder="价格" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="库存" prop="stock">
                    <Input v-model="formValidate.stock" placeholder="库存" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="图片" prop="title">
                 <Button type="primary" @click=" selectImg">选择图片</Button>
                 <Card style="width:320px">
                 <div style="text-align:center">
                    <img style="width:100%" :src='imgSrc'>

                </div>
                </Card>
                  </FormItem>
                <FormItem label="描述" prop="description">
                    <quill-editor v-model="formValidate.description"
                ref="myQuillEditor"
                style="height:300px"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
                         </quill-editor>
                </FormItem>              
                <FormItem style="margin-top: 120px">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
          <Modal
            v-model="modal2"
            title="查看照片"
            width='1000'
        >  
         <news-upload @imgObject='getImg' ></news-upload>
        </Modal>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import Base from '../../common/base'
export default {
      mixins: [Base],
    data () {
      
        return {
        module:'production',
        modal2:false,
        imgSrc:'',
        formValidate: {//表单数据
                name:'',
	            price:'',
	            seller:'',
	            stock:'',
	            description:'',
                img:{},
                 typeId:''
            },
              filter:{ //分页数据
                list:[],//装载数据
                total:0,//总记录
                page:1,//页码
                limit:10,
                name:''
            },
                  columns: [
                {
                    type:'selection',
                    width:60,
                    align:'center'
                },
                {
                    title: '商品名',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.name)
                        ]);
                    }
                },
                  {
                    title: '价格',
                    key: 'price',
                },
                {
                    title: '卖家',
                    key: 'seller',
                },
                {
                    title:'图片',
                    key:'img',
                     render:(h,params)=>{
                    return h('img',{
                        attrs:{
                             src:'http://localhost:3000/'+params.row.img.filename,
                            style: 'width: 100px;height: 100px;'
                        }
                    })
                }
                },
                {
                  title:'库存',
                  key:'stock'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.update(params.row)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        console.log(params);
                                        this.remove(params.row._id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
        }
    },methods: {
         selectImg(){
            this.modal2=true;
        },
        getImg(data){
            console.log(data);
            this.modal2=false;
            this.formValidate.img=data;
             this.imgSrc=`http://localhost:3000/${this.formValidate.img.filename}`;
        },
        // 更新页面
          update (row) {
            this.modal = true;
        Object.assign(this.$data.formValidate,row);
          this.imgSrc=`http://localhost:3000/${this.formValidate.img.filename}`;
        },
         handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {   
                    if(this.formValidate._id && this.formValidate._id.length>0){
                        this.$http.put(`http://localhost:3000/${this.module}/data/${this.formValidate._id}`,this.formValidate)
                        .then(res=>{
                            this.$Message.success('修改成功!');
                            delete this.formValidate._id;
                            this.modal = false;
                            this.getData();
                        })
                    }else{
                        this.$http.post(`http://localhost:3000/${this.module}/data`,this.formValidate)
                        .then(res=>{
                            this.$Message.success('添加成功!');
                            this.modal = false;
                            this.getData();
                        })
                    }
                    

                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
         getDataTree(){
            this.$http.get('http://localhost:3000/classify/list/3')
            .then(res=>{
                this.classifyies=res.data;
            })
        }
    },
    created () {
        this.getDataTree()
    }
}
</script>